<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
    <title></title>  
    <link rel="stylesheet" href="../css/ol.css" />
   <script type="text/javascript" src="../js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/ol.js" ></script>
    <style type="text/css">  
        body, html  
        {  
            border:none;  
            padding:0;  
            margin:0;  
        }  
        #menu  
        {  
            width:100%;  
            height:20px;  
            padding:5px 10px;  
            font-size:14px;  
            font-family:"微软雅黑";  
            left:10px;  
        }  
        .ol-popup  
        {  
            position:absolute;  
            background-color:white;  
            padding:15px;  
            border-radius:10px;  
            border:1px solid #cccccc;  
            bottom:12px;  
            left:-50px;  
        }  
        .ol-popup:after,.ol-popup:before  
        {  
            top:100%;  
            border:solid transparent;  
            content:" ";  
            height:0px;  
            width:0px;  
            position:absolute;  
            pointer-events:none;  
        }  
        .ol-popup:after  
        {  
            border-top-color:white;  
            border-width:10px;  
            left:48px;  
            margin-left:-10px;  
        }  
        .ol-popup:before  
        {  
            border-top-color:#cccccc;  
            border-width:11px;  
            left: 48px;  
            left:-11px;  
        }  
        .ol-popup-closer  
        {  
            text-decoration:none;  
            position:absolute;  
            top:2px;  
            right:8px;  
        }  
        #popup-content  
        {  
            font-size:14px;  
            font-family:"微软雅黑";  
        }  
        #popup-content .markerInfo  
        {  
            font-weight:bold;  
        }  
    </style>  
    <script type="text/javascript">  
        $(function () {  
            //初始化地图  
            var map = new ol.Map({  
                target: 'map',  
                layers: [  
                    new ol.layer.Tile({  
                        source:new ol.source.OSM()  
                    })  
                ],  
                view: new ol.View({  
                    center: [0, 0],  
                    zoom:4  
                })  
            });  
            //北京的地理坐标  
            var beijing = ol.proj.fromLonLat([116.28, 39.54]);  
  
            //要素信息  
            var featureInfo = {  
                //地理位置  
                geo: beijing,  
                //属性信息  
                att: {  
                    //标题  
                    title: "北京市",  
                    //超链接  
                    titleURL: "http://www.baidu.com",  
                    //文本内容  
                    text: "北京，简称“京”，中华人民共和国首都、直辖市、国家中心城市、超大城市，全国政治中心、文化中心、国际交往中心、科技创新中心，是中国共产党...",  
                    //图像地址  
                    imgURL: "https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=515415511,1147816764&fm=58&bpow=1480&bpoh=2200"  
                },  
            };  
  
            //创建标签样式  
            var createLabelStyle = function (feature) {  
                //返回一个样式  
                return new ol.style.Style({  
                    //点的样式  
                    image: new ol.style.Icon({  
                        //标注图片和文字之间的距离  
                        anchor: [0.5, 60],  
                        //标注样式的起点位置  
                        anchorOrigin: 'top-right',  
                        //X方向单位  
                        anchorXUnits: 'fraction',  
                        //Y方向单位  
                        anchorYUnits: 'pixels',  
                        //偏移起点位置的方向  
                        offsetOrigin: 'top-right',  
                        //透明度  
                        opacity: 0.75,  
                        //图标的url  
                        src: '../img/marker.png'   
                    }),  
                    //文本样式  
                    text: new ol.style.Text({  
                        //对其方式  
                        textAlign: 'center',  
                        //基准线  
                        textBaseline: 'middle',  
                        //文字样式  
                        font: 'normal 14px 微软雅黑',  
                        //文本内容  
                        text: feature.get('name'),  
                        //文本填充样式  
                        fill: new ol.style.Fill({ color: '#aa3300' }),  
                        //笔触  
                        stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })  
                    })  
                });  
            }  
  
            //实例化Vector要素，通过矢量图层添加到地图容器中  
            var iconFeature = new ol.Feature({  
                //几何样式  
                geometry: new ol.geom.Point(beijing),  
                //名称属性  
                name: '北京市',  
                //人口属性  
                population: 2115   
            });  
            //设置样式  
            iconFeature.setStyle(createLabelStyle(iconFeature));  
            //矢量标注的数据源  
            var vectorSource = new ol.source.Vector({  
                features: [iconFeature]  
            });  
            //矢量标注图层  
            var vectorLayer = new ol.layer.Vector({  
                source: vectorSource  
            });  
            //将矢量标注图层添加到map中  
            map.addLayer(vectorLayer);  
  
            //获取id为popup的div标签  
            var container = document.getElementById('popup');  
            //获取id为popup-content的div标签  
            var content = document.getElementById('popup-content');  
            //获取id为popup-closer的a标签  
            var closer = document.getElementById('popup-closer');  
  
            //初始化一个覆盖层  
            var popup = new ol.Overlay({  
                //元素内容  
                element: container,  
                //If set to true the map is panned when calling setPosition,   
                //so that the overlay is entirely visible in the current viewport.   
                //The default is false.  
                autoPan: true,  
                ////覆盖层如何与位置坐标匹配  
                positioning: 'bottom-center',  
                //事件传播到地图视点的时候是否应该停止  
                stopEvent: false,  
                //The animation options used to pan the overlay into view.   
                //This animation is only used when autoPan is enabled.   
                autoPanAnimation: {  
                    //动画持续时间  
                    duration:250  
                }  
            });  
            //将覆盖层添加到map中  
            map.addOverlay(popup);  
  
            //为要素添加信息的函数  
            function addFeatureInfo(info) {  
                //创建一个a标签元素  
                var elementA = document.createElement('a');  
                //设置a标签的样式类  
                elementA.className = 'markerInfo';  
                //设置a标签的超链接地址  
                elementA.href = info.att.titleURL;  
                //设置a标签的文本内容  
                setInnerText(elementA, info.att.title);  
                //将a标签元素添加到内容div标签中  
                content.appendChild(elementA);  
  
                //创建一个div标签元素  
                var elementDiv = document.createElement('div');  
                //设置div标签的内容  
                setInnerText(elementDiv, info.att.text);  
                //将div标签加入到内容div标签中  
                content.appendChild(elementDiv);  
  
                //创建一个图像标签  
                var elementImg = document.createElement('img');  
                //指定图像标签的URL  
                elementImg.src = info.att.imgURL;  
                //将img标签加入到内容div标签中  
                content.appendChild(elementImg);  
            }  
  
            //设置文本函数  
            function setInnerText(element,text) {  
                if (typeof element.textContent == 'string') {  
                    element.textContent = text;  
                } else {  
                    element.innerText = text;  
                }  
            }  
  
            //为map注册一个单击事件的监听  
            map.on('click', function (evt) {  
                //获取坐标点  
                var coordinate = evt.coordinate;  
  
                //forEachLayerAtPixel(pixel, callback, opt_this, opt_layerFilter, opt_this2)  
                //Detect layers that have a color value at a pixel on the viewport,   
                //and execute a callback with each matching layer.   
                //Layers included in the detection can be configured through opt_layerFilter.  
                var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {  
                    //在视口中遍历所有具有像素颜色的图层，如果图层存在，则返回  
                    return feature;  
                });  
  
                if (feature) {  
                    //将内容div的内容清空  
                    content.innerHTML = '';  
                    //添加要素信息  
                    addFeatureInfo(featureInfo);  
                    //如果当前popup覆盖层没有坐标，则设置坐标  
                    if (popup.getPosition() == undefined) {  
                        popup.setPosition(coordinate);  
                    }  
                }  
            });  
  
            //为map注册一个pointermove事件的监听  
            //pointermove事件  
            //Triggered when a pointer is moved.   
            //Note that on touch devices this is triggered when the map is panned, so is not the same as mousemove.  
            map.on('pointermove', function (e) {  
                //Returns the map pixel position for a browser event relative to the viewport.  
                //获取map的像素位置信息  
                var pixel = map.getEventPixel(e.originalEvent);  
                //hasFeatureAtPixel(pixel, opt_options)  
                //Detect if features intersect a pixel on the viewport.  
                //map视口中是否包含某个要素  
                var hit = map.hasFeatureAtPixel(pixel);  
                //设置符合当前条件的鼠标样式  
                map.getTargetElement().style.cursor = hit ? 'pointer' : '';  
            });  
        });  
    </script>  
</head>  
<body>  
    <div id="menu">鼠标单击标注点弹出Popup标注</div>  
    <div id="map">  
         <div id="popup" class="ol-popup">  
             <a href="#" id="popup-closer" class="ol-popou-closer"></a>  
             <div id="popup-content"></div>  
         </div>  
    </div>  
</body>  
</html>  